<template>
    <div>
        <main class="animate__animated animate__fadeIn">
            <h2 >{{question.title}}</h2>
            <el-divider><i class="el-icon-edit"></i></el-divider>
            <div class="content">{{question.content}}</div>

            <el-divider content-position="left">解疑</el-divider>
            <el-card class="box-card" v-for="dict in answer" shadow="hover">
                <div slot="header" class="doctor">
                    {{dict.username}}
                </div>
                <div  class="text item">
                    {{dict.content}}
                </div>
            </el-card>
            <el-button class="bt" type="primary" @click="dialog = true" round :disabled="doctor">医生解答</el-button>
            <el-button class="bt" type="warning" @click="back" round>返回</el-button>
        </main>
        <div class="post animate__animated animate__bounceInRight" v-show="hasLogin">
            <el-image class="image"
                      style="width: 120px; height: 120px"
                        :src="user.avatar"
            >
            </el-image>
            <el-divider><i class="el-icon-edit"></i></el-divider>
            <br>
            <el-button class="btn" plain :disabled="patient" @click="myquestion()">我的问题</el-button>
            <br>
            <el-button class="btn" plain :disabled="doctor" @click="myanswer()">我的回答</el-button>
        </div>



        <el-drawer
                title="欢迎答疑~"
                :before-close="handleClose"
                :visible.sync="dialog"
                direction="btt"
                custom-class="demo-drawer"
                ref="drawer"
        >
            <div class="demo-drawer__content">
                <el-form :model="form">
                    <el-form-item label="解疑内容" :label-width="formLabelWidth">
                        <el-input type="textarea" v-model="form.content" autocomplete="off" size="medium"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名" :label-width="formLabelWidth" style="display: none;">
                        <el-input  v-model="form.username" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="问题id" :label-width="formLabelWidth" style="display: none;">
                        <el-input  v-model="form.questionid" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="" :label-width="formLabelWidth" style="display: none">
                        <el-input v-model="form.userid"  autocomplete="off"></el-input>
                    </el-form-item>

                </el-form>
                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" @click="$refs.drawer.closeDrawer()"
                               :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                doctor:true,
                patient:true,
                hasLogin:false,
                dialog: false,
                loading: false,
                question:{
                  title:'标题',
                  content:'内容',
                  username:''
                },
                form: {
                   content:'',
                    username:'',
                    questionid:'',
                    userid:'',
                },
                formLabelWidth: '80px',
                timer: null,
                user:{
                    avatar:'https://www.gdpu.edu.cn/images/xh.png',
                    uuid:'',
                    username:''
                },
                answer:[
                    {
                    username:'用户名',
                    content:'内容'
                }
                ]
            };
        },
        methods: {
            handleClose(done) {
                const _this = this
                if (this.loading) {
                    return;
                }
                this.$confirm('确定要提交表单吗？')
                    .then(_ => {
                        this.loading = true;
                        this.timer = setTimeout(() => {
                            axios.post("http://localhost:8181/consult/addA/",this.form).then(function (resp) {
                                _this.$message({
                                    message: '提交成功,等待管理员审核',
                                    type: 'success'
                                });
                            });
                            console.log(this.form)
                            done();
                            // 动画关闭需要一定的时间
                            setTimeout(() => {
                                this.loading = false;
                            }, 400);
                        }, 2000);

                    })
                    .catch(_ => {});
            },
            myquestion(){
                this.$router.push({
                    path: '/selfcenter',
                    query: {
                        activeName:'question'
                    }
                })
            },
            myanswer(){
                this.$router.push({
                    path: '/selfcenter',
                    query: {
                        activeName:'answer'
                    }
                })
            },
            cancelForm() {
                this.loading = false;
                this.dialog = false;
                clearTimeout(this.timer);
            },
            back(){
                this.$router.go(-1);//返回上一层
            },
        },
        created() {
            const _this = this
            _this.form.questionid = this.$route.query.id
            axios.get("http://localhost:8181/consult/findQbyid/"+this.$route.query.id).then(function (resp) {
                _this.question = resp.data.data


            })
            axios.get("http://localhost:8181/consult/findAbyid/"+this.$route.query.id).then(function (resp) {
                _this.answer = resp.data.data
                console.log(resp.data.data)

            })
            if(this.$store.getters.getUser.username) {
                this.user.username = this.$store.getters.getUser.username
                this.user.avatar = this.$store.getters.getUser.avatar
                this.user.uuid = this.$store.getters.getUser.id
                this.form.userid = this.user.uuid
                this.form.username = this.user.username
                this.hasLogin = true
            }
            if(this.$store.getters.getUser.type===1){
                this.patient = false
            }
            if(this.$store.getters.getUser.type===2){
                this.doctor = false
            }
        },
    }
</script>

<style scoped>
    main {
        position: absolute;
        top: 120px;
        left: 5%;
        height: 90%;
        width: 800px;
        background-color: rgb(255, 255, 255);
    }
    h2{
        text-align: left;
        margin-left: 30px;
    }
    .content{
        margin-left: 30px;
        width: 80%;
        height: 20%;
        text-align: left;
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
        text-align: left;
    }
    .doctor{
        text-align: left;
        font-size: 15px;
        font-weight: 700;
    }
    .bt{
        position: relative;
        margin-top: 10px;
        left: 240px;
    }
    .post{
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 80px;
        top: 120px;
        background-color: rgb(255, 255, 255);
        width: 300px;
        height: 400px;
        box-shadow: 0px 15px 10px -15px rgb(74, 131, 131);
        border-radius: 10px;
    }
    .image{
        margin-top: 20px;
    }
    .btn{
        margin: 10px !important;
    }



</style>